<!--
=======================================弹框组件=================================================================
  父组件使用:
    1. 定义dialogShow变量, 默认false;
    2. 定义returnData的回调函数, res.show赋值给dialogShow, res.data就是点击确定按钮后返回的数据.
       <Dialog v-if="dialogShow" :title="'DEV弹框'" :data="{}" @returnData="res => {this.dialogShow = res.show; let data = res.data}" />
    工作: 输入数据, 返回处理后的数据
-->
<template>
  <div>
    <el-drawer
      :title="title"
      :visible.sync="show"
      :direction="'rtl'"
      size="65%"
      @close="cancel()"
    >
      <div class="dialog-content">
        <div style="display: flex" class="item" v-for="(item, index) in data" :key="index">
          <div v-if="data.length > 1" class="new-item-badge">{{ index + 1 }}</div>
          <div style="width: 25%;">
            <DepartTree style="height: 230px; overflow: auto" @currentDepart="res => item.departmentId = res[res.length - 1]" />
          </div>
          <div style="width: 75%;">
            <el-form label-position="right" label-width="80px" :model="item">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="用户名">
                    <el-input v-model="item.username" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="性 别">
                    <el-select v-model="item.sex" placeholder="请选择" clearable prefix-icon="el-icon-open">
                      <el-option :label="'男'" :value="1" />
                      <el-option :label="'女'" :value="0" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="手机号">
                    <el-input v-model="item.phone" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="邮 箱">
                    <el-input v-model="item.email" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="昵 称">
                    <el-input v-model="item.nickname" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="出生年月">
                    <el-date-picker
                      v-model="item.birth"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="状 态">
                    <el-select v-model="item.status" placeholder="请选择" clearable prefix-icon="el-icon-open">
                      <el-option :label="'开启'" :value="1" />
                      <el-option :label="'关闭'" :value="0" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
      <div style="position: absolute; right: 2%; bottom: 2%;" class="dialog-footer">
        <el-button size="mini" @click="cancel()">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitData()">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>

import DepartTree from '@/components/department/departTree'
export default {
  name: 'AddAndUpdateDialog',
  components: { DepartTree },
  props: {
    // eslint-disable-next-line vue/require-prop-type-constructor
    title: String | Number,
    // eslint-disable-next-line vue/require-prop-type-constructor
    data: Object | String | Array | Number | Boolean | Blob,
    dialogStyle: Object
  },
  data() {
    return {
      show: true
    }
  },
  mounted() {

  },
  methods: {
    submitData: function() {
      this.returnData({ show: false, data: this.data })
    },
    cancel: function() {
      this.returnData({ show: false, data: null })
    },
    returnData: function(params) {
      this.$emit('returnData', params)
    }
  }

}
</script>

<style scoped>
  /* 弹框样式 */
  .dialog-style {}

  /* 内容盒子 */
  .dialog-content {
    height: 380px;
    overflow: auto;
  }

  /* 弹框item边框 */
  .item {
    position: relative;
    margin: 1px 3px 9px;
    padding-right: 6px;
    padding-top: 24px;
    border-radius: 5px;
    box-shadow: 2px 2px 6px 0px #8b83835e;
    background: #e9eeef21;
    overflow: hidden;
  }
  .new-item-badge {
    position: absolute;
    background: #02a7f0;
    z-index: 999;
    width: 69px;
    text-align: center;
    height: 19px;
    line-height: 19px;
    border-radius: 3px;
    color: #fff;
    font-size: 16px !important;
    padding: 1px 4px 0;
    margin-top: 0px;
    top: 6px;
    left: -19px;
    transform: rotate(-45deg);
  }

  /* 样式穿透 */
  /deep/ .el-drawer__body {
    /*background: #1f2d3d;*/
  }
  /deep/ .el-dialog {
    border-radius: 12px;
    background: #FFFFFFF4;
    box-shadow: 6px 5px 7px 2px #433f3fd6;
  }
  /deep/ .el-dialog__body {
    padding: 4px 16px;
  }

  /* 移动端自适应 */
  @media screen and (max-width: 1056px) {
    /deep/ .el-dialog {
      width: 100% !important;
      border-radius: 30px 30px 0 0;
      background: #FFFFFFF4;
      box-shadow: 6px 5px 7px 2px #433f3fd6;
      position: fixed;
      bottom: 0px;
    }
  }
</style>
